<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div id="app">
        <div class="bigbox">
            <!-- 写日志 -->
            <div class="left">
                <h2>日志</h2>

                <!-- 标题 -->
                <div class="leftbox">
                    <div class="name">日志标题:</div>
                    <input type="text" v-model="lilte">
                </div>

                <!-- 内容 -->
                <div class="leftbox">
                    <div class="name">日志内容:</div>
                    <textarea id="textarea_box" placeholder="请填写日志内容" v-model="text"></textarea>
                </div>

                <!-- 接收人 -->
                <div class="leftbox">
                    <div class="name">接收人:</div>
                    <input type="text" v-model="perple">
                </div>

                <!-- 发送按钮 -->
                <div class="leftbox">
                    <div class="btn" @click="btn">发送</div>
                </div>
            </div>

            <!-- 日志列表 -->
            <div class="right">
                <div class="rightbox" v-for="(item, index) in arr">
                    <div class="box">
                        <div class="new" v-if="item.isNew">new</div>
                        <!-- 发表时间 -->
                        <div class="time">{{item.time | now}}</div>

                        <!-- 接收人 -->
                        <div class="perple">接收者：{{item.per}}</div>

                        <div class="btnbox">
                            <!-- 显示正在编辑中 -->
                            <div class="editxt" v-show="id === item.id">正在编辑...</div>

                            <!-- 编辑 -->
                            <div class="edit" @click="edit(index)" v-show="id !== item.id">编辑</div>

                            <!-- 删除 -->
                            <div class="del" @click="del(index)" v-show="id !== item.id">删除</div>
                        </div>
                    </div>

                    <!-- 标题 -->
                    <div class="box">
                        <div class="rightname">标题:</div>
                        <div class="txtbox">{{item.lil}}</div>
                    </div>

                    <!-- 内容 -->
                    <div class="box">
                        <div class="rightname">内容:</div>
                        <div class="txtbox">{{item.tex}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="./vue.js"></script>
    <script>
        //使用过滤器实现发表的时间
        Vue.filter('now', value => {
            let date = value;
            let Y = date.getFullYear() + '-';
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
            let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
            strDate = Y + M + D + h + m + s;
            return strDate;
        })

        new Vue({
            el: '#app',

            data: {
                //标题
                lilte: '',
                // 接收者
                perple: '',
                // 内容
                text: '',
                // 创建一个储存发表的数组
                arr: [],
                //编辑日志的id
                //id: '',
            },

            methods: {
                // 实现发表按钮
                btn() {
                    //获取发布时间
                    let date = new Date();

                    if (this.lilte == '' && this.perple == '' && this.text == '') {
                        alert('表格中不能为空！！！');
                    } else {
                        // 把发表的内容储存在arr数组中
                        this.arr.unshift({
                            //时间
                            time: date,
                            lil: this.lilte,
                            tex: this.text,
                            per: this.perple,
                            //是否新增日志
                            isNew: true,
                            //日志id, 唯一
                            id: 'c_' + date.getTime(),
                        });

                        console.log(this.arr);

                        // 发表好后，把日志表清空
                        this.lilte = '';
                        this.perple = '';
                        this.text = '';

                        //重置id, 恢复添加日志状态
                        this.id = '';
                    }
                },

                // 实现删除按钮
                del(index) {
                    this.arr.splice(index, 1);
                },

                // 实现编辑按钮
                edit(index) {
                    //查看arr数组的数据
                    // console.log(this.arr[index]);
                    console.log(this.id);

                    //显示正在编辑中...
                    this.id = this.arr[index].id;

                    // 把储存在arr里的数据重新返回日志表中
                    this.lilte = this.arr[index].lil;
                    this.perple = this.arr[index].per;
                    this.text = this.arr[index].tex;

                    //取消new标记
                    this.arr[index].isNew = false;

                    // 删除日志列表
                    // this.arr.splice(index, 1);
                }
            }
        })
    </script>
</body>

</html>